<template>
  <div>
    <el-table :data="activityList" highlight-current-row class="el-table-style">
      <el-table-column type="index" width="50" sortable></el-table-column>
      <el-table-column label="展示图" width="150" sortable>
        <template slot-scope="scope">
          <el-image :src="scope.row.img_url"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="栏目名称" sortable></el-table-column>
      <el-table-column prop="module_name" label="所属模块" sortable></el-table-column>
      <el-table-column prop="type_name" label="内容类型" sortable></el-table-column>
      <el-table-column prop="created_at" label="添加时间" sortable></el-table-column>
      <el-table-column prop="updated_at" label="更新时间" sortable></el-table-column>
      <el-table-column prop="sort" label="排序" sortable></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" class="danger-btn" size="mini" @click="classifyDetail(scope.row.id)">编辑</el-button>
          <el-button type="danger" class="danger-btn" size="mini" @click="delClassify(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pagesize"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-col>
    <Columndialog ref="columndialog"></Columndialog>
  </div>
</template>

<script>
    import Columndialog from "./columndialog";
    export default {
      name: "colunm",
      components: {Columndialog},
      data(){
        return{
          activityList : [],
          tabtitle: '添加栏目',
          total: 0,
          page_id: 1,
          pagesize: 10,
        }
      },
      mounted(){
        this.classifyList();
        // console.log(window.localStorage.getItem('user_token'))
      },
      methods: {
        //获取栏目列表
        async classifyList(){
          let params = {
            page : this.page_id,
            limit : this.pagesize
          }
          const res = await this.$api.classifyList(params);
          if (res.data.level == 'success'){
            this.activityList = res.data.data;
            this.total = res.data.page_info.total;
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //编辑栏目
        async classifyDetail(id){
          this.tabtitle = "编辑栏目";
          let params = {
            id : id
          }
          const res = await this.$api.classifyDetail(params);
          // console.log(res.data.data)
          if (res.data.level == 'success'){
            this.$refs.columndialog.topContent.src = res.data.data.img_url;
            this.$refs.columndialog.columnValue = res.data.data;
            this.$refs.columndialog.addFormVisible = true;
            // console.log(this.)
          }
        },
        //添加栏目
        async addClassify(){
          let params = this.$refs.columndialog.columnValue;
          const res = await this.$api.addClassify(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            })
            this.classifyList();
            this.tabtitle = '添加栏目';
            this.$refs.columndialog.addFormVisible = false;
          }else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //删除栏目
        async delClassify(id){
          let params = {
            id : id
          }
          const res = await this.$api.delClassify(params);
          if (res.data.level == 'success'){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.classifyList();
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        },
        //分页按钮显示
        currentChange(id){
          this.page_id = id;
          this.getBannerList();
        }
      }
    }
</script>

<style scoped>
</style>
